<template>
	<view class="container">
		<view class="player">
			<video class="playervideo" v-if="showVideo" id="myVideo" ref="myVideo" :src="playObj.videourl"
				enable-play-gesture @error="videoErrorCallback" @play="videoPlayCallback" @pause="videoPauseCallback"
				@ended="videoEndedCallback" @loadedmetadata="videoLoaded" @timeupdate="timeUpdate" controls
				:poster="playObj.poster"></video>
		</view>
		<view class="tabbar">
			<view :class="tabFlag===2 ? 'tabsel' : ''" @click="tabclick(2)"><text class="tabtitle">介绍</text><text
					class="tabline"></text></view>
			<view :class="tabFlag===1 ? 'tabsel' : ''" @click="tabclick(1)"><text class="tabtitle">目录</text><text
					class="tabline"></text></view>
		</view>
		<view class="videodetail">
			<view class="videodata" v-show="tabFlag===1">
				<view class="videolist">
					<view class="teachershare">
						<view class="teachercont"><text class="vline"></text><text>课程目录</text></view>
						<view class="sharecont"><button open-type="share" class="button_share"></button></view>
					</view>
					<scroll-view class="scroll-v" enableBackToTop="true" scroll-y :scroll-top="scrollTop">
						<view class="classline">
							<image class="playimg" src="../../../static/image/onlineschool/playing.png"></image>
							<text>{{ playObj.title }}</text>
						</view>
						<view @tap="setvideo(item,index)" v-for="(item,index) in vodList" :key="item.vodId"
							class="classline" v-if="index != active">
							<text>{{ item.title }}</text>
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="detail" v-show="tabFlag===2">
				<scroll-view class="detail_s" enableBackToTop="true" scroll-y>
					<view class="detail_title">{{ title }}</view>
					<view class="detail_two">
						<view class="detail_two_a">
							<text>{{actor}}</text>
						</view>
						<view class="detail_two_share"><button open-type="share" class="detail_button_share"></button></view>
					</view>
					<view class="detail_introduce">
						<view class="detail_in_t"><text>课程介绍</text></view>
						<view class="detail_in_v" :class="isFload ? 'hide' : 'show'">
							<rich-text class="detail_in_text" :nodes="newsAbstract"></rich-text>
						</view>
					</view>
					<view class="detail_more" @click="isFload=!isFload">{{isFload?"更多":"收起"}}
						<uni-icons v-show="isFload" type="bottom" color="#7F7F7F"></uni-icons>
						<uni-icons v-show="!isFload" type="top" color="#7F7F7F"></uni-icons>
					</view>
					<view class="detail_bottom"></view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		request
	} from "@/http/request"
	import {
		newsServlet,
		saveRecord,
		listRecord
	} from "@/http/api.js"
	import {
		authVideo
	} from "@/common/util.js"
	export default {
		data() {
			return {
				tabFlag: 1,
				nodeId: '',
				newsId: '',
				title: '',
				actor: '',
				newsAbstract: '',
				vodList: '',
				hPic: '',
				showVideo: false,
				videoContext: null,
				playObj: {
					playId: 0,
					title: '',
					poster: '',
					videourl: '',
					currentTime: 0,
					duration: 0,
					episode: 1,
					playDuration: 0
				},
				playFlag: null,
				toastFlag: true,
				showToast: false,
				scrollTop: 0,
				listitemWidth: 0,
				active: 0,
				isFload: true,
			}
		},
		onLoad(e) {
			if (!e.content) return
			this.playObj.playDuration = 0;
			let _obj = JSON.parse(decodeURIComponent(e.content));
			this.nodeId = _obj.nodeId || ''
			this.newsId = _obj.newsId || ''
			this.getCourseDetail()
		},
		onShow() {
			console.log('nodeId=======' + this.nodeId);
		},
		onUnload() {
			this.saveRecord()
		},
		// #ifdef MP-WEIXIN
		onShareAppMessage() {
			const param = encodeURIComponent(JSON.stringify({
				nodeId: this.nodeId,
				newsId: this.newsId
			}))
			return {
				title: '学课程详情',
				path: `pages/onlineschool/videoplay/index?content=${param}&isRedirectUrl`
			}
		},
		// #endif
		methods: {
			// 课程列表
			getCourseDetail() {
				const _data = {
					url: newsServlet,
					data: {
						functionName: 'getCurrentNews',
						nodeId: this.nodeId,
						newsId: this.newsId
					}
				};
				request(_data).then(res => {
					const {
						title = '', actor = '', newsAbstract = '', vodList = [], hPic = '', pPic = ''
					} = res.data
					this.title = title
					this.actor = actor
					this.newsAbstract = newsAbstract
					this.vodList = vodList
					this.hPic = hPic || pPic
					
					this.historyfindone();
				})
			},
			tabclick(index) {
				this.tabFlag = index
			},
			gotoposition(dis) {
				this.scrollTop = dis;
			},
			videoErrorCallback(e) {
				uni.showModal({
					content: "视频加载异常",
					showCancel: false
				})
			},
			getPlayDuration(){
				this.playFlag = setInterval(() => {
					this.playObj.playDuration++;
				}, 1000);
			},
			videoPlayCallback(e) {
				console.log('------videoPlay------');
				if (this.playFlag != null) {
					clearInterval(this.playFlag);
					this.playFlag = null;
				}
				this.getPlayDuration();
			},
			videoPauseCallback(e) {
				console.log('------videoPause------');
				clearInterval(this.playFlag)
				this.playFlag = null;
			},
			videoLoaded(e) {
				console.log('------videoLoaded--------');
				this.toastFlag = true;
				this.playObj.duration = parseInt(e.detail.duration);
				this.videoContext.play()
				if (this.showToast) {
					this.showToast = false
					uni.hideToast()
					this.toastFlag = true
				}
			},
			timeUpdate(e) {
				this.playObj.duration = parseInt(e.detail.duration);
				this.playObj.currentTime = parseInt(e.detail.currentTime);
				if (this.active < this.vodList.length - 1 && e.detail.duration > 60) {
					if (e.detail.duration - e.detail.currentTime < 15) {
						if (!this.toastFlag) return
						this.toastFlag = false
						uni.showToast({
							title: "即将自动为您播放下一个视频",
							icon: "none",
							duration: 15000,
							success: (res) => {
								this.showToast = true
							}
						})
					} else {
						if (!this.showToast) return
						this.showToast = false
						uni.hideToast()
						this.toastFlag = true
					}
				} else {
					if (!this.showToast) return
					this.showToast = false;
					uni.hideToast();
					this.toastFlag = true;
				}
			},
			videoEndedCallback(e) {
				console.log('---------videoEnded---------');
				this.saveRecord();
				this.videoContext.pause();
				if (this.active < this.vodList.length - 1) {
					this.active++
					this.videoInit(this.vodList[this.active])
				}
			},
			getAuthvideo(url) {
				let _url = url.replace('video.5g.wasu.tv', 'eduvideo.5g.wasu.tv');
				this.playObj.videourl = authVideo(_url);
			},
			setvideo(val, index) {
				if (this.active == index) return false
				this.videoContext.pause()
				this.saveRecord()
				this.active = index
				this.videoInit(val)
			},
			videoInit(val) {
				this.videoContext.seek(0)
				this.playObj.playDuration = 0
				this.playObj.poster = val.img
				this.playObj.playId = val.vodId
				this.playObj.title = val.title
				this.playObj.episode = val.episode
				this.getAuthvideo(val.fileList[0].playUrl)
			},
			historyfindone() { //查询历史记录
				this.$request({
					url: listRecord
				}).then(res => {
					let _listinfo = res;
					let _currentEpisodePlayTime = 0;
					this.showVideo = true
					this.videoContext = uni.createVideoContext('myVideo')
					_listinfo.forEach(item => {
						if (item.newsId == this.newsId) {
							this.active = item.currentEpisodeNumber - 1;
							_currentEpisodePlayTime = item.currentEpisodePlayTime;
						}
					})
					this.videoInit(this.vodList[this.active])
					if (!_listinfo.length) return
					this.$nextTick(() => {
						this.videoContext.seek(parseInt(_currentEpisodePlayTime))
					})
				}).catch(() => {
					this.showVideo = true;
					this.videoContext = uni.createVideoContext('myVideo')
					this.videoInit(this.vodList[this.active])
				}).finally(()=>{
					this.$nextTick(()=> {
						const itemquery = uni.createSelectorQuery().in(this);
						itemquery.select('.classline').boundingClientRect(data => {
							this.listitemWidth = data.height;
							this.gotoposition(this.listitemWidth * this.active);
						}).exec();
					});
				})
			},
			// 保存学习记录
			saveRecord() {
				let _playObj = Object.assign({},this.playObj);
				this.playObj.playDuration = 0;
				clearInterval(this.playFlag);
				this.playFlag = null;
				this.$request({
					url: saveRecord,
					data: {
						cover: this.hPic,
						currentEpisodeName: _playObj.title,
						currentEpisodeNumber: this.active + 1,
						currentEpisodePlayTime: _playObj.currentTime,
						currentEpisodeDuration: _playObj.duration,
						currentEpisodePlayDuration: _playObj.playDuration,
						name: this.title,
						originCourseId: this.newsId,
						totalEpisodeNumber: this.vodList.length,
						nodeId: this.nodeId,
						newsId: this.newsId
					},
					method: 'POST'
				}).then(res => {
					console.log('保存学习记录', res)
				}).catch(err=>{
					console.log('保存err', err)
				})
			}
		},
		beforeDestroy(){
			if (this.playFlag != null) {
				clearInterval(this.playFlag);
				this.playFlag = null;
			}
		}
	}
</script>

<style lang="scss">
	@import "./index.scss";
</style>
